<template>
	<div class="functionChart">
		<h3 v-if="curNode === null" style="padding-left: 5px">请选择功能节点</h3>
		<div v-if="curNode" style="width: 100%">
			<el-row class="list"> <h3 style="border-left: 3px solid blue; padding-left: 5px">节点信息</h3></el-row>
			<el-row class="list">
				<el-col :span="3">
					<!-- <p>节点编码</p> -->
					<p>{{ rootNode.Title }}名称</p>
				</el-col>
				<el-col :span="20">
					<p>{{ curNode.ItemCode }}</p>
				</el-col>
			</el-row>
			<el-row class="list">
				<el-col :span="3">
					<!-- <p>名称</p> -->
					<p>{{ rootNode.Title }}</p>
				</el-col>
				<el-col :span="20">
					<p>{{ curNode.Title }}</p>
				</el-col>
			</el-row>
			<el-row class="list" v-if="useIcon">
				<el-col :span="3">
					<p>当前图标</p>
				</el-col>
				<el-col :span="20">
					<i v-if="/^el-.+/.test(curNode.IconID)" :class="curNode.IconID" style="font-size: 20px" />
					<img v-else-if="/^http.+/.test(curNode.IconID)" :src="curNode.IconID" style="width: 30px" />
				</el-col>
			</el-row>
			<el-row class="list">
				<el-col :span="3">
					<p>创建时间</p>
				</el-col>
				<el-col :span="20">
					<p>{{ formatTime2View(curNode.CTime) }}</p>
				</el-col>
			</el-row>
			<el-row class="list">
				<el-col :span="3">
					<p>发布时间</p>
				</el-col>
				<el-col :span="20">
					<p>{{ formatTime2View(curNode.PTime) }}</p>
				</el-col>
			</el-row>
			<el-row v-if="curNode.ItemType">
				<el-col :span="3">
					<p>{{ curNode.ItemType.title }}</p>
				</el-col>
				<el-col :span="20">
					<p>{{ curNode.ItemType.value }}</p>
				</el-col>
			</el-row>
			<div v-if="curNode.extends && curNode.extends.length > 0">
				<el-row v-for="(item, index) in curNode.extends" :key="index">
					<el-col :span="3">
						<p>{{ item.title }}</p>
					</el-col>
					<el-col :span="20">
						<p>{{ item.value }}</p>
					</el-col>
				</el-row>
			</div>
			<el-row class="list">
				<span style="padding-right: 5px">是否发布:</span>
				<el-switch v-model="curNode.Status" active-color="#13ce66" inactive-color="#cecece" active-value="1" inactive-value="0" @change="release" />
			</el-row>
		</div>
	</div>
</template>
<script lang="js">
// import { Post } from '/@/api/linxyun/base/index.ts'
import { httpReqeustApi } from '/@/api/linxyun/base';
import { formatTime2View, formatTime2DB, formatDate2View, formatDate2DB } from '/@/utils/formatTime.js';
const httpReqeust = httpReqeustApi();

export default {
	name: 'ViewNode',
	props: {
		inNode: { type: Object, default: null },
		itemTypeDefine: { type: Object, default: null },
		updateFuncName: { type: String, default: 'updateTreeData' },
		useIcon: { type: Boolean, default: false },
		rootNode:{ type: Object, default: ()=>({}) },
	},
	data() {
		return {
			curNode: null,

			extends: []
		}
	},
	watch: {
		inNode() {
			this.initData()
		}
	},
	created() {
		this.initData()
	},
	computed:{
		formatTime2View(){
			return (time)=>{
				return formatTime2View(time)
			}
		}
	},
	methods: {
		async initData() {
			this.curNode = null
			if (!this.inNode) {
				return
			}
			this.curNode = JSON.parse(JSON.stringify(this.inNode))

			if (this.itemTypeDefine && this.itemTypeDefine.InputType) {
				if (this.itemTypeDefine.InputType === '1' && this.itemTypeDefine.Options) {
					let value = this.curNode.ItemType
					for (let i = 0; i < this.itemTypeDefine.Options.length; i++) {
						if (this.itemTypeDefine.Options[i].value === value) {
							value = this.itemTypeDefine.Options[i].label
						}
					}
					this.curNode.ItemType = { title: this.itemTypeDefine.Name, value: value }
				} else {
					this.curNode.ItemType = { title: this.itemTypeDefine.Name, value: this.curNode.ItemType }
				}
			}

			console.log('[Debug][viewNode]Init node: ', this.curNode, this.itemTypeDefine)
		},

		release(e) {
			const params = {}
			params.Status = e
			params.ItemCode = this.curNode.ItemCode
			httpReqeust.Post(this.updateFuncName, params).then((res) => {
				if (res.success === true && res.data) {
					this.$message({ message: '修改成功', type: 'success' })
				} else {
					this.$message({ message: '修改失败', type: 'error' })
				}
			})
		}
	}
}
</script>
<style scoped>
.mix-tree-list {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding-left: 30px;
}
.back {
	background: rgb(204, 204, 204);
}

.title {
	max-width: 100%;
	margin-right: 40px;
}
.main {
	height: 100%;
	display: flex;
	justify-content: space-between;
	/* 设置超出滚动 */
	overflow-x: auto;
}
.list {
	margin: 15px;
	margin-left: 0;
}
:deep(.el-collapse-item__wrap) {
	overflow: auto !important;
}
</style>
